@mixin center($width:fit-content, $height:fit-content, $position:absolute, $zIndex:1) {
	/*@if type-of($width) != number {
		@error "$width必须是一个数值类型, 你输入的width是: #{$width}.";
	}*/

	width: $width !important;
	height: $height !important;
	position: $position;
	z-index: $zIndex;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

@mixin flex(
	$align-items:center,
	$justify-content:space-around,
	$flex-direction:row,
	$flex-wrap:nowrap
) {
	display: flex;
	align-items: $align-items;
	justify-content: $justify-content;
	flex-direction: $flex-direction;
	flex-wrap: $flex-wrap;
}

@mixin flex-start($align-items: center) {
	display: flex;
	align-items: $align-items;
	justify-content: flex-start;
}

@mixin flex-center($align-items: center) {
	display: flex;
	align-items: $align-items;
	justify-content: center;
}

@mixin flex-end($align-items: center) {
	display: flex;
	align-items: $align-items;
	justify-content: flex-end;
}

@mixin space-around($align-items: center) {
	display: flex;
	align-items: $align-items;
	justify-content: space-around;
}

@mixin space-between($align-items: center) {
	display: flex;
	align-items: $align-items;
	justify-content: space-between;
}

@mixin flex-space($flex-grow: 1, $flex-shrink: 1, $flex-basis: 0) {
	flex-grow: $flex-grow !important;
	flex-shrink: $flex-shrink !important;
	flex-basis: $flex-basis !important;
}

@mixin flex-column($justify-content: flex-start, $align-items: center) {
	display: flex;
	flex-direction: column;
	justify-content: $justify-content; /*这个时候justify-content上下方向的左中右了, 即高中下!*/
	align-items: $align-items; /*这个时候变成了: 左中右!*/
}

@mixin flex-1() {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}

@mixin justify($width: 100%) {
	width: $width;
	display: block; //注：此处需要设置display属性为块级block
	text-align: justify;
	text-align-last: justify;
}


@mixin line-ellipsis($line-clamp: 2, $width: 100%, $height: 100%) {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $line-clamp;
	width: $width !important;
	height: $height !important;
}


@mixin link($font-size:12px, $color:#409eff) {
	font-size: $font-size;
	color: $color;
	cursor: pointer;
	user-select: none;

	&:hover {
		text-decoration: underline;
	}
}

@mixin box($borderRadius:6px, $padding:20px) {
	border-radius: $borderRadius;
	padding: $padding;
}


